<template>
	<div class="page">
		<waterfall :line-gap="200" :watch="items">
		  <!-- each component is wrapped by a waterfall slot -->
		  <waterfall-slot
		    v-for="(item, index) in items"
		    :width="item.width"
		    :height="item.height"
		    :order="index"
		    :key="item.id"
		  >
		    <div class="item" :style="item.style" :index="index">
		    		<img src="../../../../dist/static/imags/img3.jpeg" style="width: 100%;"/>
		    </div>
		  </waterfall-slot>
		</waterfall>
	</div>

</template>
<style>
	@import url("../../../common/common.css");
	@import url("quillEditorList.css");
</style>
<script>
	import $ from 'jquery'
	import Waterfall from 'vue-waterfall/lib/waterfall'
	import WaterfallSlot from 'vue-waterfall/lib/waterfall-slot'

	export default {
		components: {
			Waterfall,
    			WaterfallSlot
		},
		data() {
			return {
				align: 'center',
				isBusy: false,
				items: [{
					width: 60,
					height: 80,
					style: {
						'background': 'red'
					}
				}, {
					width: 100,
					height: 20,
					style: {
						'background': 'green'
					}
				}]
			}
		},
		created() {},
		mounted() {

		},
		methods: {
			addItems: function () {
                if (!this.isBusy && this.items.length < 500) {
                  this.isBusy = true
                  this.items.push.apply(this.items, ItemFactory.get(50))
                }
              },
              shuffle: function () {
                this.items.sort(function () {
                  return Math.random() - 0.5
                })
              },
              reflowed: function () {
                this.isBusy = false
              }
		}
	}
</script>